<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="产品信息"
    width="800"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <vxe-table
      ref="tableRef"
      height="700"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column title="SKU" width="100">
        <template #default="{ row }">
          {{ row.goods_sku?.sku || "--" }}
          <!-- <div>自定义:{{ row.goods_sku?.custom_sku || "--" }}</div> -->
        </template>
      </vxe-column>
      <vxe-column title="产品名称">
        <template #default="{ row }">
          <VText :value="row.goods_sku?.sku_cn_title" :line="2"></VText>
        </template>
      </vxe-column>
      <vxe-column title="产品分类">
        <template #default="{ row }">
          <VText :value="row.goods_sku?.goods_spu?.spu_category_text" :line="2"></VText>
        </template>
      </vxe-column>
      <vxe-column title="是否建模" width="120">
        <template #default="{ row }">
          {{ row.is_build_model ? "已建模" : "--" }}
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw } from "vue";
import { ElMessage } from "element-plus";
import VImage from "@/components/Image/index.vue";

const data = reactive({
  visible: false,
  tableData: [],
  load: false,
});

const { visible, tableData, load } = toRefs(data);

const open = async (data) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  console.log(data);
  tableData.value = data;
  visible.value = true;
};

const handleClose = () => {
  tableData.value = [];
  visible.value = false;
};

defineExpose({ open });
</script>
<style lang="scss"></style>
